<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
	<meta name="format-detection" content="telephone=no, email=no"/>
	<meta charset="UTF-8">
	<title>限时抢购</title>
	<link rel="stylesheet" href="themes/css/core.css">
	<link rel="stylesheet" href="themes/css/icon.css">
	<link rel="stylesheet" href="themes/css/home.css">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	<link href="iTunesArtwork@2x.png" sizes="114x114" rel="apple-touch-icon-precomposed">

</head>
<body>

	<header class="aui-header-default aui-header-fixed ">
		<a href="javascript:history.back(-1)" class="aui-header-item">
			<i class="aui-icon aui-icon-back"></i>
		</a>
		<div class="aui-header-center aui-header-center-clear">
			<div class="aui-header-center-logo">
				<div class="" style="margin-right: 50px;">淘抢购活动</div>
			</div>
		</div>
		<!--<a href="#" class="aui-header-item-icon"   style="min-width:0">-->
			<!--<i class="aui-icon aui-icon-search"></i>-->
		<!--</a>-->
	</header>

	<section class="aui-myOrder-content" id="vue">
		<div class="m-tab demo-small-pitch aui-Time-list" data-ydui-tab>
			<!--<div class="aui-myOrder-fix">-->
				<!--<ul class="tab-nav">-->
					<!--<li class="tab-nav-item tab-active">-->
						<!--<a href="javascript:;">-->
							<!--<span>00:00</span>-->
							<!--<em>已开抢</em>-->
						<!--</a>-->
					<!--</li>-->
					<!--<li class="tab-nav-item">-->
						<!--<a href="javascript:;">-->
							<!--<span>07:00</span>-->
							<!--<em>已开抢</em>-->
						<!--</a>-->
					<!--</li>-->
					<!--<li class="tab-nav-item">-->
						<!--<a href="javascript:;">-->
							<!--<span>09:00</span>-->
							<!--<em>已开抢</em>-->
						<!--</a>-->
					<!--</li>-->
					<!--<li class="tab-nav-item">-->
						<!--<a href="javascript:;">-->
							<!--<span>13:00</span>-->
							<!--<em>抢购中</em>-->
						<!--</a>-->
					<!--</li>-->
					<!--<li class="tab-nav-item">-->
						<!--<a href="javascript:;">-->
							<!--<span>17:00</span>-->
							<!--<em>即将开抢</em>-->
						<!--</a>-->
					<!--</li>-->
				<!--</ul>-->
			<!--</div>-->
			<div class="aui-prompt"><i class="aui-icon aui-prompt-sm"></i>还有商品的哦！可以继续抢购的哦！</div>
			<div class="tab-panel">
				<div class="tab-panel-item tab-active">
					<ul>
						<li v-for="item in productList" :key="item.item_id" @click="goDetail(item)">
							<div class="aui-list-title-info">
								<a href="javascript:;" class="aui-list-product-fl-item" style="position: inherit;">
									<div class="aui-list-product-fl-img" style="width: 6.5rem;">
										<img :src="item.pic_url" alt="">
									</div>
									<div class="aui-list-product-fl-text">
										<h3 class="aui-list-product-fl-title" style="font-size: 18px;line-height: 2rem;">{{item.title}}</h3>
										<div class="aui-list-product-fl-mes">
											<div>
									<span class="aui-list-product-item-price">
										活动价：
										<em>¥</em>
										{{item.zk_final_price}}
									</span>
												<span class="aui-list-product-item-del-price">
										¥{{item.reserve_price}}
									</span>
											</div>
											<div class="aui-btn-purchase">
												仅剩{{item.total_amount-item.sold_num}}件
											</div>
										</div>
									</div>

								</a>
								<div class="aui-list-title-btn">
									<a :href="item.click_url" class="red-color">马上抢购</a>
								</div>
							</div>
						</li>

					</ul>
				</div>

			</div>
		</div>
	</section>


	<script type="text/javascript" src="themes/js/jquery.min.js"></script>
	<script type="text/javascript" src="themes/js/aui.js"></script>
	<script type="text/javascript" src="themes/vue2/vue.js"></script>
	<script type="text/javascript" src="themes/js/base.js"></script>
	<script type="text/javascript" >
        /**
         * Javascript API调用Tab
         */
        !function ($) {
            var $tab = $('#J_Tab');

            $tab.tab({
                nav: '.tab-nav-item',
                panel: '.tab-panel-item',
                activeClass: 'tab-active'
            });

			/*
			 $tab.find('.tab-nav-item').on('open.ydui.tab', function (e) {
			 console.log('索引：%s - [%s]正在打开', e.index, $(this).text());
			 });
			 */

            $tab.find('.tab-nav-item').on('opened.ydui.tab', function (e) {
                console.log('索引：%s - [%s]已经打开了', e.index, $(this).text());
            });
        }(jQuery);

        var vue = new Vue({
            el: '#vue',
            data: {
                productList:[],
                items: 1,
                b:true
            },
            created:function () {   //实例初始化创建完成执行
                this.getProductList();
                window.addEventListener('scroll', this.onScroll);
            },
            methods:{              //定义封装方法
                onScroll() {
                    //可滚动容器的高度
                    let innerHeight = document.querySelector('#vue').clientHeight;
                    //屏幕尺寸高度
                    let outerHeight = document.documentElement.clientHeight;
                    //可滚动容器超出当前窗口显示范围的高度
                    let scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
                    //scrollTop在页面为滚动时为0，开始滚动后，慢慢增加，滚动到页面底部时，出现innerHeight < (outerHeight + scrollTop)的情况，严格来讲，是接近底部。
                    console.log(innerHeight + " " + outerHeight + " " + scrollTop);
                    if ((innerHeight-110) < (outerHeight + scrollTop)) {
                        if(!this.b){
                            return;
                        }
                        //加载更多操作
                        console.log("loadmore："+this.items);
                        this.items += 1;
                        this.b = false;
                        this.getProductList();
                    }
                },
                //获取列表
                getProductList:function () {
                    var self = this;
                    $.ajax({
                        type:"POST",
                        url:CTX+"/open/h5/tbk/getTqgProductList",
                        dataType:"JSON",
                        data:{
                            pageNo:self.items
                        },
                        success:function(data){
                            if (data.code == 0) {
                                var list = self.productList;
                                var plist = data.data.tbk_ju_tqg_get_response.results.results;
                                var arrList = list.concat(plist);
                                self.productList = arrList;
                                self.b = true;
                            } else {

                            }
                        }
                    });
                },
                goDetail(item){

                        window.location.href = item.click_url;

                }
            },
            watch:{     //监听器

            }

        })


	</script>

</body>
</html>